<template>
  <el-button text :bg="isShow" :type="isShow ? 'primary' : ''" @click="handleShow">
    报告路况
  </el-button>
  <div id="popup" class="ol-popup" v-show="coordinate" ref="container">
    <div class="popup-top">
      报告路况
      <div id="popup-closer" class="ol-popup-closer" @click="Close" ref="closer"></div>
    </div>

    <div id="popup-content">
      <el-form
        ref="ruleFormRef"
        style="max-width: 380px"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-position="left"
        label-width="100px"
        size="small"
      >
        <el-form-item label="事件类型" prop="type" style="width: 400px">
          <el-select v-model="ruleForm.type" placeholder="请选择事件类型">
            <el-option v-for="item in types" :key="item.value" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="事件地址" prop="position" style="width: 400px">
          <el-input
            v-model="ruleForm.position"
            autocomplete="off"
            placeholder="请输入路况地址,包含事故路段"
          />
        </el-form-item>
        <el-form-item label="建筑标识" prop="sign" style="width: 400px">
          <el-input
            v-model="ruleForm.sign"
            autocomplete="off"
            placeholder="请输入事故最近的建筑标识"
          />
        </el-form-item>

        <el-form-item label="发生时间" prop="date" style="width: 400px">
          <el-date-picker
            v-model="ruleForm.date"
            type="datetime"
            placeholder="选择日期和时间"
            style="width: 400px"
          />
        </el-form-item>

        <el-form-item label="事件描述" prop="describe" style="width: 400px">
          <el-input
            v-model="ruleForm.describe"
            autocomplete="off"
            placeholder="请输入事故的具体信息"
          />
        </el-form-item>

        <div class="move">
          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)" color="#2276c4">
              确认
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">取消</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { addCondition } from '@/api/condition'
import { ElMessageBox } from 'element-plus'
const isShow = ref(false)
const { map, userName } = defineProps({
  map: {
    type: Object,
    required: true,
  },
  userName: {
    required: true,
  },
})
const closer = ref(null)
const container = ref(null)
const coordinate = ref('')
const ruleFormRef = ref()
const ruleForm = reactive({
  type: '',
  position: '',
  sign: '',
  date: '',
  describe: '',
})
const types = [
  { value: '碰撞' },
  { value: '刮蹭' },
  { value: '碾压' },
  { value: '追尾' },
  { value: '超车' },
  { value: '失火' },
  { value: '其他' },
]

const rules = reactive({
  type: [{ required: true, trigger: 'blur' }],
  position: [{ required: true, trigger: 'blur' }],
  sign: [{ required: true, trigger: 'blur' }],
  date: [{ required: true, trigger: 'blur' }],
  describe: [{ required: true, trigger: 'blur' }],
})
let popup
const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    //使用 validate 对整个表单进行校验 回调函数返回值valid 为true时代表校验通过，false代表校验不通过。
    if (valid) {
      const result = {
        userName: userName,
        coordinateX: coordinate.value[0],
        coordinateY: coordinate.value[1],
        ...ruleForm,
      }
      console.log(result)
      await addCondition(result)

      ElMessageBox.alert('提交成功', {
        type: 'success',
        confirmButtonText: '确定',
      })
      resetForm(ruleFormRef.value)
      Close()

      console.log('submit!')
    } else {
      console.log('error submit!')
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
const handleShow = () => {
  isShow.value = !isShow.value
  if (isShow.value) {
    ElMessageBox.alert('请点击事故位置', {
      type: 'success',
      confirmButtonText: '确定',
    })
  } else {
    Close()
  }
}
function Close() {
  //未定义popup位置

  popup?.setPosition(undefined)
  //失去焦点
  closer.value.blur()
  return false
}
map.on('click', function (e) {
  if (!isShow.value) return
  coordinate.value = e.coordinate
  openOverlay()
})
function openOverlay() {
  popup = new ol.Overlay({
    //要转换成overlay的HTML元素
    element: container.value,
    //当前窗口可见
    autoPan: true,
    //Popup放置的位置
    positioning: 'bottom-center',
    //是否应该停止事件传播到地图窗口
    stopEvent: true,
    autoPanAnimation: {
      //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
      duration: 250,
    },
  })
  map.addOverlay(popup)
  popup.setPosition(coordinate.value)
}
</script>

<style scoped>
.ol-popup {
  width: 550px;
  height: 300px;
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 15px;
  border: 1px solid #cccccc;
  bottom: 5px;
  left: -50px;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}

.ol-popup-closer {
  position: absolute;
  top: 10px;
  right: 20px;
  color: #f1eff1;
  font-size: small;
}

.ol-popup-closer:after {
  content: '✖';
}

#popup-content {
  position: absolute;
  top: 48px;
  left: 40px;
  font-size: 28px;
  font-family: '黑体';
}

#popup-content .markerInfo {
  font-weight: bold;
}

.popup-top {
  position: absolute;
  color: #818081;
  padding: 10px;
  top: 0px;
  left: 0px;
  font-size: 23px;
  font-weight: 700;
  width: 550px;
  border-bottom: 1px solid #818081;
}
.move {
  position: absolute;
  right: -80px;
  bottom: -35px;
}
:deep(.el-form-item__label) {
  font-size: 15px;
  color: black;
  font-weight: 800;
}
</style>
